<!-- 测试错误组件 - 用于验证错误边界功能 -->
<template>
    <div class="test-error">
        <h2>错误边界测试</h2>
        <p>点击下面的按钮来触发一个错误，测试错误边界功能。</p>

        <!-- 触发错误的按钮 -->
        <el-button type="danger" @click="triggerError">
            触发错误
        </el-button>

        <!-- 显示错误信息 -->
        <div v-if="errorMessage" class="error-info">
            <p>{{ errorMessage }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理
 */
import { ref } from 'vue'

// ==================== 响应式数据 ====================

/**
 * 错误信息
 * @description 存储错误信息用于显示
 */
const errorMessage = ref<string>('')

// ==================== 交互方法 ====================

/**
 * 触发错误
 * @description 故意抛出一个错误来测试错误边界
 */
const triggerError = () => {
    try {
        // 故意抛出一个错误
        throw new Error('这是一个测试错误，用于验证错误边界功能')
    } catch (err) {
        errorMessage.value = err instanceof Error ? err.message : '未知错误'
        // 重新抛出错误，让错误边界捕获
        throw err
    }
}
</script>

<style scoped lang="scss">
.test-error {
    padding: 2rem;
    text-align: center;

    h2 {
        color: #1f2937;
        margin-bottom: 1rem;
    }

    p {
        color: #6b7280;
        margin-bottom: 2rem;
    }

    .error-info {
        margin-top: 1rem;
        padding: 1rem;
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-radius: 6px;
        color: #dc2626;
    }
}
</style>
